<template>
  <div id="box">
    <div class="mui-card" v-for="(item, index) in allList" :key="index" @click="goodInfo(item.id)">
      <!--页眉，放置标题-->
      <div class="mui-card-header">{{item.title}}</div>
      <!--内容区-->
      <div class="mui-card-content">
        <img :src="item.img_url" alt>
      </div>
      <!--页脚，放置补充信息或支持的操作-->
      <div class="mui-card-footer">
        <p>
          <span>¥{{item.sell_price}}</span>
          <span>
            <del>¥{{item.market_price}}</del>
          </span>
        </p>
        <p>
          热卖中
          <span>剩{{item.stock_quantity}}件</span>
        </p>
      </div>
    </div>
    <button @click="getMore" class="mint-button mint-button--danger mint-button--large is-plain">
      <label class="mint-button-text">加载更多</label>
    </button> 
  </div>
</template>

<script>
export default {
  data() {
    return {
      pageindex: 1,
      allList: []
    };
  },
  created() {
    this.getAll();
  },
  methods: {
    getAll() {
      this.$ax
        .get("api/getgoods?pageindex=" + this.pageindex)
        .then(result => {
          this.allList =this.allList.concat( result.data.message);
        })
        .catch(err => {
          console.log(err);
        });
    },
    getMore(){
      this.pageindex++;
      this.getAll()
    },
    goodInfo(id){
      console.log(111);
      
      this.$router.push('/home/goodsInfo/'+id)
    }
  }
};
</script>

<style scoped>
#box {
  display: flex;
  flex-wrap: wrap;
  /* flex-direction: column; */
}
.mui-card {
  display: block;
  width: 160px;
  height: 315px;
}
.mui-card .mui-card-header {
  height: 80px;
  font-size: 14px;
}
.mui-card-content {
  text-align: center;
}
.mui-card img {
  width: 90%;
}
.mui-card .mui-card-footer {
  flex-wrap: wrap;
  flex-direction: column;
}
.mui-card .mui-card-footer p span {
  margin-right: 10px;
}
.mui-card .mui-card-footer p span:nth-of-type(1) {
  color: red;
}
</style>
